import React, { Component } from 'react'
import { Route, Redirect, Switch } from "react-router-dom"

import News from "./News"
import Message from "./Message"
import MyNavLink from "../../component/MyNavLink"

export default class Home extends Component {
    render() {
        // console.log("路由组件接收到的 props 是", this.props)
        return (
            <div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            <div>
                                <h2>Home</h2>
                                <div>
                                    <ul className="nav nav-tabs">
                                        <li>
                                            <MyNavLink activeClassName="active" to="/home/news">News</MyNavLink>
                                        </li>
                                        <li>
                                            <MyNavLink activeClassName="active" to="/home/message">Message</MyNavLink>
                                        </li>
                                    </ul>
                                    <div>
                                        <Switch>
                                            <Route path="/home/news" component={News}></Route>
                                            <Route path="/home/message" component={Message}></Route>
                                            <Redirect to="/home/news" />
                                        </Switch>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
}
